<template>
    <div class="product">
        <div class="product-bg"></div>
        <el-row>
            <el-col :span="16" :offset="4" class="nav-body">
                <el-menu :default-active="activeIndex" mode="horizontal" active-text-color="#ffd04b" class="product-nav" router>
                    <el-menu-item index="/product/videos">视频介绍</el-menu-item>
                    <el-menu-item index="/product/intro">产品简介</el-menu-item>
                    <el-menu-item index="/product/action">期权案例</el-menu-item>
                    <el-menu-item index="/product/special">产品特点</el-menu-item>
                    <el-menu-item index="/product/diff">期权期货区别</el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
        <router-view class="product-views"></router-view>
    </div>
</template>
<script>
export default {
    data() {
        return {
            activeIndex: '/product/videos'
        }
    },
    created: function(){
    	this.activeIndex = this.$route.path
    }
}

</script>
<style scoped>
.product-bg {
    height: 299px;
    background: url(../assets/product-top-bg.jpg) no-repeat center center;
    background-size: cover;
}
.nav-body{
	text-align: center;
}
.product-nav{
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.product-nav .el-menu-item:hover {
    background-color: #ee811e;
}

.product-nav .el-menu-item.is-active:hover {
    background-color: #fff;
}
.product-views{
	background: url(../assets/product-content-bg.jpg) repeat center center;
}
</style>
